<template>
    <div id="main">
        <Mheader title="个人中心"/>
            <div class="header">
                <div class="header_photo">
                    <img src="../../../public/images/headp.jpg" alt="">
                    
                </div>
                <h1>欢迎用户 {{username}}</h1>
            </div>
            <div class="body">
                <el-row>
                    <el-button type="primary" round ><i class="el-icon-time"></i> 观影历史</el-button>
                </el-row>
                <el-row>
                    <el-button type="primary" round><i class="el-icon-user"></i> 我的会员</el-button>
                </el-row>
                <el-row>
                    <el-button type="primary" round><i class="el-icon-setting"></i> 相关设置</el-button>
                </el-row>
                <el-row>
                    <el-button type="primary" round><i class="el-icon-edit-outline"></i> 关于我们</el-button>
                </el-row>
                <el-row>
                    <el-button type="primary" round @click="exit">
                        <i class="el-icon-switch-button"></i> 退出登录
                    </el-button>
                </el-row>
            </div>
            
            
        <Mfooter/>
    </div>  
</template>

<script>
import Mheader from '@/components/Mheader'
import Mfooter from '@/components/Mfooter'
export default {
    name:'My',
    data(){
        return {
            showPass:true,
            username:''
        }
    },
    components:{
        Mheader,
        Mfooter
    },
    methods:{
        exit(){
            // 清除本地存储数据并跳转登录页面
            localStorage.removeItem("username");
            this.$router.push('/mine')
        }
    },
    mounted(){
        this.username = localStorage.getItem('username')
    }
}
</script>

<style scoped>
h1{text-align: center;height: 30px;}
.header{background: url('../../../public/images/movie_3.jpg');height: 200px;width: 100%;border-bottom-right-radius: 25px;border-bottom-left-radius: 25px;box-shadow: 0px 5px 5px gray;}
.header_photo{width: 70px;height: 70px;margin: 30px auto;border:white solid 1px;border-radius: 35px;}
.header_photo img{width: 100%;border-radius: 35px;}
#main{text-align: center;}
a{margin-top: 50px;color: #e54847;}
.el-button{margin-top: 10px;width: 30%;box-shadow: 0px 5px 5px gray;}
.body{margin-top: 50px;}
</style>